<!DOCTYPE html>
<html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v2.min.js?2.9.3"></script>

        <style>
            body {
                font-family: Arial;
            }

            .link {
                stroke: #999;
                stroke-width: 3px;
                stroke-opacity: .6;
                marker-end: url(#defaultEnd);
            }


            .node circle {
                stroke: #fff;
                stroke-width: 1.5px;
            }

            .nodelabel {
                font-size: 0.8em;
                font-family: Arial, "Trebuchet MS", chaparral-pro, museo-sans, sans-serif;
            }

            marker#defaultEnd {
                fill: #999;
                stroke: #999;
            }




        </style>
    </head>
    <body>
        <h1>Hello this is a test</h1>
        <p>Of connected graph display</p>
        <script>

            var width = 960,
            height = 500;

            var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
            
            svg.append("svg:defs").append("svg:marker").attr("id", "defaultEnd")
            .attr("viewBox", "0 -10 20 20").attr("refX", 20).attr("refY", 0)
            .attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto")
            .append("svg:path").attr("d", "M0,-5L10,0L0,5");
  
  
            var color = d3.scale.category20();

            var force = d3.layout.force()
            .charge(-150)
            .linkDistance(100)
            .size([width, height]);

            d3.json("graph.json", function(json) {
                force
                .nodes(json.nodes)
                .links(json.links)
                .start();
                
           var root = json.nodes(0);
                root.fixed = true;
                root.x = width/ 2;
                root.y = height / 2;



                var link = svg.selectAll(".link")
                .data(json.links)
                .enter().append("line")
                .attr("class", "link");

                var node = svg.selectAll(".node")
                .data(json.nodes)
                .enter().append("g")
                .attr("class", "node")
                .call(force.drag);

                /*node.append("image")
              .attr("xlink:href", "https://github.com/favicon.ico")
              .attr("x", -8)
              .attr("y", -8)
              .attr("width", 16)
              .attr("height", 16);*/
      
                node.append("circle")
                .attr("class", "node")
                .attr("r", "10")
                .style("fill", function(d) { return color(d.group); })
                .call(force.drag);

                node.append("svg:a")
                .attr("xlink:href", "http://wherever.com").append("text").attr("class", "nodelabel")
                .attr("dx", 12)
                .attr("dy", ".35em")
                .text(function(d) { return d.name });
   
                force.on("tick", function() {
                    link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
                });
            });

            // node.append("svg:a").attr("xlink:href", "http://www.google.com").append("svg:text")
            // .text("greg");
            //attr("text-anchor", "middle")



        </script>

    </body>
</html>